<template>
  <div ref="container" class="Bedding text-white">
    <div v-if="token" class="edit-view">
      <div v-if="openEdit === 0" class="btn" @click="openEdit = 1">
        打开编辑
      </div>
      <div v-else class="btn" @click="closeEdit">取消编辑</div>
      <div v-if="openEdit === 1" class="btn yu" @click="openEdit = 2">
        预览效果
      </div>
      <div v-if="openEdit === 2" class="btn yu" @click="openEdit = 1">
        继续编辑
      </div>
      <div v-if="openEdit !== 0" class="btn save" @click="EidtPageIndexInfoFun">
        保存编辑
      </div>
    </div>
    <div v-if="sleepInfo" class="banner">
      <div v-if="isEdit" class="btn-view">
        <div class="btn">
          上传banner
          <input type="file" @change="handleFileUpload" />
        </div>
      </div>
      <img v-if="sleepInfo.PicPath" :src="sleepInfo.PicPath" alt="" />
    </div>
    <div v-if="sleepInfo" class="text-content">
      <div v-if="isEdit" class="title">
        <input placeholder="输入主标题" v-model="sleepInfo.TitleCN" />
      </div>
      <div v-else class="title">{{ sleepInfo.TitleCN }}</div>
      <div v-if="isEdit" class="sub">
        <input placeholder="输入副标题" v-model="sleepInfo.TitleEN" />
      </div>
      <div v-else class="sub">{{ sleepInfo.TitleEN }}</div>
      <div v-if="isEdit" class="text">
        <textarea
          class="textarea"
          placeholder="输入介绍"
          v-model="sleepInfo.Introduce"
        ></textarea>
      </div>
      <div v-else class="text">
        {{ sleepInfo.Introduce }}
      </div>
    </div>
    <div class="pro-view">
      <div
        v-if="isEdit"
        class="card-view border"
        :style="{
          width: productStyle.width + 'px',
          height: productStyle.height + 'px',
        }"
      >
        <div class="icon-view" @click="showWin = true">
          <icons class="icon" name="add" />
        </div>
      </div>
      <div
        v-for="item in productList"
        :key="item.Id"
        class="card-view"
        :style="{ width: productStyle.width + 'px' }"
        @click="toPage('/sdetail/' + item.Id)"
      >
        <img
          class="card-img"
          :src="item.IndexPicPath"
          alt=""
          :style="{
            width: productStyle.width + 'px',
            height: productStyle.height + 'px',
          }"
        />
        <div class="t-view">
          <div class="title">{{ item.TitleA }}</div>
          <div class="desc ellipsis-text">{{ item.IntroduceA }}</div>
          <div class="more-view">
            <div class="text">{{ item.TypeName }}</div>
            <icons class="icon" name="jiantou" />
          </div>
        </div>
      </div>
    </div>
    <div class="pagination-view">
      <div
        v-for="p in pages"
        :key="p + 'a'"
        class="page"
        :class="CurrentPage === p ? 'active' : ''"
        @click="pageFun(p)"
      >
        {{ p }}
      </div>
      <div class="page" @click="pageFun(CurrentPage + 1)">></div>
    </div>
  </div>
  <div v-if="showWin" class="sleep-model">
    <Sleep @cancle="cancleFun" />
  </div>
</template>

<script lang="ts" setup>
import Cookies from "js-cookie";
import Sleep from "@/components/Sleep/index.vue";
import { computed, ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import {
  GetSleepPageData,
  UploadFile,
  EditSleepPageData,
  GetSleep,
} from "@/server";
import { useAppStore } from "@/store/modules/user";
const store = useAppStore();
const token = Cookies.get("token");
const router = useRouter();
const productList = ref([]) as any; //产品列表
const container = ref<HTMLElement | null>(null);
const productStyle = ref({ width: 500, height: 620 });
const showWin = ref(false);
const openEdit = ref(0);
const closeEdit = () => {
  openEdit.value = 0;
  GetSleepPageDataFun();
};
const cancleFun = () => {
  showWin.value = false;
  GetSleepFun();
};
const isEdit = computed(() => openEdit.value === 1);
const pages = computed(() => {
  const n = Total.value || 1;
  return Math.ceil(n / 8);
});
const CurrentPage = ref(1);
const Total = ref(1);
const handleFileUpload = async (event: any) => {
  const file = event.target.files[0];
  let newimgdata = URL.createObjectURL(file);
  const fd = new FormData();
  fd.append("file", file);
  const res: any = await UploadFile(fd);
  if (res.Tag === 1) {
    const FileName = res.Data[0].FileName;
    sleepInfo.value.Pic = FileName;
    sleepInfo.value.PicPath = newimgdata;
  } else {
    store.error(res.Message); // 错误提示
  }
};
const handleResize: ResizeObserverCallback = (entries) => {
  if (entries[0].target) {
    const containerWidth = entries[0].contentRect.width;
    const w = (containerWidth - containerWidth * 0.24 - 50) / 2;
    const radio = 682 / 456;
    productStyle.value = { width: w, height: w / radio };
  }
};
const EidtPageIndexInfoFun = async () => {
  // console.log(JSON.stringify(PageIndexInfo.value));
  const { Pic, TitleCN, TitleEN, Introduce } = sleepInfo.value;
  const params = {
    Pic,
    TitleCN,
    TitleEN,
    Introduce,
    Operator: token,
  };
  const res: any = await EditSleepPageData(params);
  if (res.Tag === 1) {
    closeEdit();
    console.log(res.Data);
    store.success(res.Message); // 错误提示
  } else {
    store.error(res.Message); // 错误提示
  }
};
const sleepInfo = ref(null) as any;
const GetSleepPageDataFun = async () => {
  const res: any = await GetSleepPageData({});
  if (res.Tag === 1) {
    sleepInfo.value = res.Data;
  } else {
    store.error(res.Message); // 错误提示
  }
};
const pageFun = (n: number) => {
  if (n <= pages.value) {
    CurrentPage.value = n;
    GetSleepFun();
  }
};
const GetSleepFun = async () => {
  const res: any = await GetSleep({
    TypeId: "", //来自下拉框数据6.6.2
    TitleA: "",
    IsResponsibility: 0, //默认0  ，是否责任页面数据，1 是  0 否
    CurrentPage: CurrentPage.value, // 当前页
    PageSize: 8, //每页的条数
  });
  if (res.Tag === 1) {
    productList.value = res.Data;
    Total.value = res.Total;
  } else {
    store.error(res.Message); // 错误提示
  }
};
GetSleepFun();
GetSleepPageDataFun();
/**
 * @description: 页面跳转实例
 * @param {*} url
 * @return {*}
 * @author: cool panda
 */
const toPage = (url: string) => {
  window.open(url, "_blank");
};
onMounted(() => {
  const resizeObserver = new ResizeObserver(handleResize);
  if (container.value) {
    resizeObserver.observe(container.value);
  }

  return () => {
    if (container.value) {
      resizeObserver.unobserve(container.value);
    }
    resizeObserver.disconnect();
  };
});
</script>
<style lang="less" scoped>
.Bedding {
  width: 100%;

  .banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 300px;

    img {
      width: 100%;
      object-fit: cover;
    }
  }

  .text-content {
    padding: 40px 0 80px;

    .title {
      font-size: 28px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #000000;
      line-height: 53px;
    }

    .sub {
      font-size: 20px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #000000;
    }

    .text {
      margin-top: 60px;
      font-size: 17px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #000000;
      line-height: 40px;
      white-space: pre-wrap;
    }
  }

  .pro-view {
    display: flex;
    flex-wrap: wrap;
    padding: 0 12%;
    justify-content: space-between;

    .card-view {
      width: 34%;

      &.border {
        border: 1px dashed #dddddd;

        .icon-view {
          height: 100%;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;

          .icon {
            width: 150px;
            height: 150px;
          }
        }
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .t-view {
        height: 220px;
        text-align: left;

        .title {
          margin-top: 15px;
          margin-bottom: 6px;
          font-size: 16px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #000000;
          line-height: 30px;
        }

        .desc {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #000000;
          line-height: 32px;
          margin-bottom: 26px;
          height: 62px;
        }

        .more-view {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .text {
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
            line-height: 22px;
          }

          .icon {
            color: #000;
            width: 1.2em;
            height: 1.2em;
          }
        }
      }
    }
  }

  .pagination-view {
    display: flex;
    justify-content: center;

    .page {
      padding: 20px 10px;
      color: #666666;

      &.active {
        font-weight: bold;
        color: #000;
      }
    }
  }
}

.sleep-model {
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 2000;
  overflow: auto;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 0 30px 30px;
}
</style>
